<template>
  <div>
    <div class="sea_wrap">
      <div class="sea_info">
        <el-input v-model="searchText"
                  placeholder="姓名查询"></el-input>
        <el-button type="success"
                   @click="sea">查询</el-button>
      </div>
      <el-button type="primary"
                 icon="el-icon-plus"
                 @click="$store.commit('changeAdminDia',true)">添加</el-button>
    </div>
    <!-- 添加管理员的弹出层 -->
    <el-dialog class="mydia"
               :close-on-click-modal="false"
               @close="cencelEdit()"
               :visible.sync="$store.state.adminDia">
      <div slot="title">
        <div style="background:skyblue;">
          <span>{{diaTitle}}</span>
        </div>
      </div>

      <el-form label-width="120px">
        <el-form-item label="用户名：">
          <el-input v-model="addObj.userName"></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="addObj.turename"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="addObj.phone"></el-input>
        </el-form-item>
        <el-form-item label="权限选择：">
          <el-select v-model="addObj.power">
            <el-option value="1"
                       label="系统管理员"></el-option>
            <el-option value="2"
                       label="课程管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="success"
                   @click="add">{{addBtn}}</el-button>
        <el-button type="primary"
                   @click="cencelEdit()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addAdmin, getPower, editAdmin } from '../../api/admin'
export default {
  name: 'Ljfvue2011Adminform',
  data () {
    return {
      searchText: "",
      diaTitle: "添加管理员",
      addBtn: "确定",
      addObj: {
        userName: "",
        turename: "",
        phone: "",
        password: "123456",
        power: "",
        tokenId: ""
      }
    };
  },

  mounted () {

  },
  created () {
    getPower().then(res => {
      console.log(res)
    })
  },
  beforeMount () {
    this.$bus.$on("sendedit", (row) => {
      console.log(row)
      this.addObj.userName = row.userName;
      this.addObj.turename = row.turename;
      this.addObj.phone = row.phone;
      this.addObj.power = row.power;
      this.addObj.tokenId = row.tokenId;
      this.addObj.password = "";
      this.addBtn = "确认修改"
      this.diaTitle = "修改管理员"
    })
  },
  methods: {
    cencelEdit () {//关闭修改
      this.$store.commit("changeAdminDia", false);
      this.clearForm();
    },
    clearForm () {
      // 清空输入框 修改id 密码等
      this.addObj.userName = ""
      this.addObj.phone = ""
      this.addObj.turename = ""
      this.addObj.power = ""
      this.addObj.tokenId = "";
      this.addObj.password = "123456";
      // 按钮和标题重置成添加
      this.addBtn = "确定"
      this.diaTitle = "添加管理员"
    },
    sea () { //搜索
      this.$parent.getAdminList(0, this.searchText)
      this.searchText = "";
    },
    async add () { //添加管理员或修改管理员
      console.log(123123)
      if (this.addObj.tokenId) { //判断是否有修改id
        //   // 修改接口
        var editRes = await editAdmin(this.addObj);
        // console.log(editRes)
        if (editRes.data.success) {
          this.$message({
            message: editRes.data.success,
            type: "success"
          })
        }
      } else {
        // 添加接口
        var res = await addAdmin(this.addObj)
        console.log(res);
        if (res.data.success) {
          this.$message({
            message: res.data.success,
            type: "success"
          })
        }
      }
      // 清空输入框 修改id 密码等
      // 按钮和标题重置成添加
      this.clearForm();
      // 关闭 
      this.$store.commit("changeAdminDia", false)
      // 添加后从新渲染列表
      this.$parent.getAdminList()
    }
  },
};
</script>

<style lang="less" >
.sea_wrap {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  background: #ccc;
  .sea_info {
    display: flex;
    .el-input {
      margin-right: 10px;
    }
  }
}
.mydia .el-dialog__header {
  background: skyblue;
}
.mydia .el-dialog__footer {
  text-align: center;
  display: flex;
  justify-content: space-around;
  > span {
    width: 300px;
    display: flex;
    justify-content: space-around;
    .el-button {
      width: 100px;
    }
  }
}
</style>